<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
<script>

class Upload {
  constructor(uploadType) {
    this.uploadType = uploadType
  }
  delFile(id) {
    // 文件名和大小存储在外部管理器uploadManager中
    uploadManager.setExternalState(id, this)
    let flage = window.confirm('确定删除该文件吗?' + this.fileName)
    if(flage) {
      return this.dom.parentNode.removeChild(this.dom)
    }
  }
}

class UploadFactory {
  constructor() {
    this.createdFlyWeightObjs = {}
  }
  create(uploadType) {
    if(this.createdFlyWeightObjs[uploadType]) {
      return this.createdFlyWeightObjs[uploadType]
    }
    return this.createdFlyWeightObjs[uploadType] = new Upload(uploadType)
  }
}

class UploadManager {
  constructor() {
    this.uploadDatabase = {}
    this.uploaFatory = new UploadFactory()
  }
  add(id, uploadType, fileName, fileSize) {
    let flyWeightObj = this.uploaFatory.create(uploadType)
    let dom = document.createElement('div')
    dom.innerHTML = `
      <span>文件名：${fileName}, 文件大小：${fileSize}</span>
      <button class="delFile">delete</button>
    `
    dom.querySelector('.delFile').onclick = () => {
      flyWeightObj.delFile(id)
    }
    document.body.appendChild(dom)
    this.uploadDatabase[id] = {
      fileName,
      fileSize,
      dom
    }
    return flyWeightObj
  }
  setExternalState(id, flyWeightObj) {
    let uploadData = this.uploadDatabase[id]
    for(let i in uploadData) {
      flyWeightObj[i] = uploadData[i]
    }
  }
}

let id = 0
let uploadManager = new UploadManager()
window.startUpload = (uploadType, files) => {
  for(let i = 0, file; file = files[i++]; ) {
    let uploadObj = uploadManager.add(++id, uploadType, file.fileName, file.fileSize)
  }
}

/** 对象爆炸 */
// 文件上传
// let id = 0
// window.startUpload = function(uploadType, files) {
//   for(let i = 0, file; file = files[i++]; ) {
//     let uploadObj = new Upload(uploadType, file.fileName, file.fileSize)
//     // 为upload对象设置唯一的id
//     uploadObj.init(id++)
//   }
// }
// class Upload {
//   constructor(uploadType, fileName, fileSize) {
//     this.uploadType = uploadType
//     this.fileName = fileName
//     this.fileSize = fileSize
//     this.id = null
//     this.dom = null
//   }
//   init(id) {
//     this.id = id
//     this.dom = document.createElement('div')
//     this.dom.innerHTML = `
//       <span>文件名：${this.fileName}, 文件大小：${this.fileSize}</span>
//       <button class="delFile">delete</button>
//     `
//     this.dom.querySelector('.delFile').onclick = () => {
//       this.delFile()
//     }
//     document.body.appendChild(this.dom)
//   }
//   delFile() {
//     let flage = window.confirm('确定删除该文件吗?' + this.fileName)
//     if(flage) {
//       return this.dom.parentNode.removeChild(this.dom)
//     }
//   }
// }
startUpload('plugin', [{
  fileName: '1.txt', fileSize: 1000
}, {
  fileName: '2.txt', fileSize: 2000
}, {
  fileName: '3.txt', fileSize: 3000
}])
startUpload('flash', [{
  fileName: '4.txt', fileSize: 4000
}, {
  fileName: '5.txt', fileSize: 5000
}, {
  fileName: '6.txt', fileSize: 6000
}])
</script>
</html>